<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件化-全局组件</title>
</head>
<body>

<div id="app">
    <!-- 通过组件名称直接使用，不使用驼峰命名的方法 -->
    <component-a></component-a>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>

    /*
    *1：全局组件注册：
    *   他们在注册之后可以用在任何新创建的Vue根实例模版中
    *  参数： 组件名称
    *   1：可以使用驼峰（camelCase）或者 横线分隔（kebab-case） 命名的方式
    *   2：DOM 中只能使用横线分隔方式进行引用组件
    * */
    Vue.component("component-a", {
        template: "'<div><h1>头部组件 - {{ name }}</h1></div>',",
        data() {
            return {name: " 全局组件"}
        }
    });


    new Vue({
        el: "#app"
    });

</script>
</body>
</html>
